<template>
  <div class="orderDetails">
    <div class="orderDetail">
      <el-table :data="tableData.list" style="width: 100%" :border="true">
        <el-table-column prop="type_name" label="类别" width="150" />
        <el-table-column prop="detail" label="项目明细" width="120" >
            <template #default="scope">
            <el-text style="margin-right:4px" v-if="typeof scope.row.detail === 'object' && scope.row.detail !== null" >{{scope.row.detail.name}}</el-text>
               <el-text v-else>{{scope.row.detail}}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="order_sn" label="处方编号" width="120" />
        <el-table-column prop="num" label="数量" width="120" />
        <el-table-column prop="pay_moneys" label="应付金额" width="120" />
        <el-table-column prop="paid_fee" label="支付金额" width="120" />
        <el-table-column prop="refunded_fee" label="已退金额" width="120" />
        <el-table-column prop="surplus_fee" label="可退金额" width="120" />
        <el-table-column prop="status" label="处方状态" width="120" />
        <el-table-column prop="lock_status" label="锁方状态" width="120" >
          <template #default="scope">{{scope.row.lock_status == 1 ?"锁定":"无锁"}}</template>
        </el-table-column>
        <el-table-column fixed="right" label="Operations" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" v-if="scope.row.type === 1 " @click="openDialog(scope.row.prescription_id)">
              处方
            </el-button>
            <el-button link type="primary" size="small" @click="showDetail(scope.row)"
              v-if="scope.row.type === 1 ||  scope.row.type === 2">查看</el-button>
            <el-button v-if="scope.row.type === 3" link type="primary" size="small" @click="showDetail(scope.row)">查看物流</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-position="left">

        <el-form-item label="总计:" class="itemCol">
          <el-text><span class="unit">¥</span>{{tableData.total_money}}</el-text>
        </el-form-item>
        <el-form-item label="退费:" class="itemCol">
          <el-text><span class="unit">¥</span>{{tableData.refund_money}}</el-text>
        </el-form-item>
        <el-form-item label="实收:" class="itemCol">
          <el-text><span class="unit">¥</span>{{tableData.collect_money}}</el-text>
        </el-form-item>
        <el-form-item label="优惠金额:" class="itemCol">
          <el-text><span class="unit">¥</span>111</el-text>
        </el-form-item>
        <el-form-item label="支付类型:" class="itemCol">
          <el-text>111</el-text>
        </el-form-item>
        <el-form-item label="支付方式:" class="itemCol">
          <!-- <el-text><span class="unit">¥</span>{{tableData.payment_method.payment_method}}</el-text> -->
        </el-form-item>
        <el-form-item :label="tableData.payment_type + ':'" class="itemCol marginL20">
          <el-text v-if="tableData.payment_method"><span class="unit">¥</span>{{tableData.payment_method[0].money}}</el-text>
        </el-form-item>
        <el-form-item label="优惠:" class="itemCol marginL20">
          <el-text><span class="unit">¥</span>{{tableData.discount_money}}</el-text>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <Notes v-if="prescriptionOrderId"  :prescriptionOrderId="prescriptionOrderId"   ref="isdialogTableVisible"></Notes>
</template>

<script setup>
  import {ref,nextTick,onMounted,reactive} from 'vue'
  import {orderCost,enums} from '/src/api/orderManage/recipeOrder'
  import Notes from '../components/notes.vue'
  import {useRouter} from "vue-router";
  const props = defineProps({
    prescriptionOrderId: { type: String }
  })
  const dialogTableVisible = ref(true)
  const formInline = ref({})
  const tableData = ref([])
  const dataAll = ref({})
  const router = useRouter()

  //订单信息
  const getOrderCost = async () => {
    try {
      const result = await orderCost({id:props.prescriptionOrderId})
      if (result.code == 200) {
        console.log('订单',result.data)
        tableData.value=result.data
        console.log('订单', result.data)
      }
    } catch (error) {
      console.error('获取列表时出错：', error)
    }
  }
  const order_status=ref()
  //枚举接口enums
  const getEnums = async () => {
    try {
      const result = await enums()
      console.log('枚举', result)
      if (result.code == 200) {
        console.log('枚举',result.data)
        order_status.value=result.data.order_status
      }
    } catch (error) {
      console.error('获取列表时出错：', error)
    }
  }


  onMounted(async () => {
    await getEnums()
    await getOrderCost();
  })
  const isdialogTableVisible = ref(null);
  const openDialog = (prescriptionId) => {
    if (isdialogTableVisible.value) {
      isdialogTableVisible.value.openNotesDia(prescriptionId);
    }
  }
 /**
  * 跳转到处方详情
  */
  const showDetail = ({ prescription_order_id, prescription_id, type }) => {
    router.push({
     name: 'recipe_detail',
     query: {
       prescription_id,
       prescription_order_id,
       type
     }
    });
  }
</script>

<style lang="scss" scoped>
  .demo-form-inline {
    width: 100%;
    margin-top: 20px;
  }

  .demo-form-inline ::v-deep .el-form-item {
    width: 33.33%;
    margin-right: 0px !important;
    margin-bottom: 0 !important;
    font-weight: 300;
  }

  ::v-deep .el-form-item__label {
    color: rgba(0, 0, 0, .85)
  }

  .itemCol {
    width: 100% !important;
  }

  .marginL20 {
    margin-left: 20px;
  }

  .unit {
    margin-right: 6px;
  }
</style>
